import React from 'react';
import AnimatedTransition from '../AnimatedTransition';
// import VirtualList from '../compages/LIST/VirtualDomList';

const Merchandise = () => {
    // const data = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
    return (
        <AnimatedTransition>
            <h1>无权限访问此页面</h1>
            {/*             
            <p>webapck打包优化技术</p>
            <p>项目部署、上线技术</p>
            <p style={{color: 'red'}}>RBAC权限管理技术</p>
            <p style={{color: 'red'}}>双token,无感刷新技术</p>
            <p style={{color: 'red'}}>状态管理工具、组件传参</p>
            <p>Ai对话</p>
            <p>优化项目</p>
            <p style={{color: 'red'}}>虚拟列表</p>
            <p>用户聊天, 群聊天</p>
            <p>大文件上传</p>
            <p>人脸识别技术</p>
            <p>获取验证码、验证真人拼图技术</p>
            <p>图片上传、预览、裁剪、压缩技术</p>
            <p style={{color: 'green'}}>响应式适配技术</p>
            <p>地图和定位服务技术</p>
            <p>支付相关技术</p>
            <p>音频处理技术、视频处理技术</p>
            <p>OCR识别技术</p>
            <p>语音识别技术</p>
            <p>困难点：监控摄像头技术</p> 
            */}
            {/* 
            根据技术的依赖关系、基础设施优先级和业务核心程度，排序如下：
            第一梯队：基础设施与底层架构
            项目部署、上线技术
            （先搭建环境，确保代码能部署和测试）
            状态管理工具、组件传参
            （确定数据流动和组件通信方式，为后续开发打基础）
            RBAC 权限管理技术
            （多角色系统的基础，需优先设计）
            第二梯队：用户认证与安全
            双 token, 无感刷新技术
            （保障登录状态安全，依赖后端认证）
            获取验证码、验证真人拼图技术
            （注册 / 登录验证的基础功能）
            第三梯队：核心业务功能
            用户聊天，群聊天
            （社交类核心功能，依赖状态管理和认证）
            大文件上传
            （若涉及商品视频 / 图片上传，需优先实现）
            图片上传、预览、裁剪、压缩技术
            （商品展示的基础功能）
            支付相关技术
            （电商核心功能，需确保安全和稳定性）
            第四梯队：增强体验与技术优化
            虚拟列表
            （优化长列表性能，提升用户体验）
            响应式适配技术
            （适配多端设备，需在 UI 开发阶段同步考虑）
            webapck 打包优化技术
            （优化打包体积和速度，可在开发中后期进行）
            第五梯队：AI 与高级功能
            人脸识别技术
            （如用于实名认证，需结合安全需求）
            OCR 识别技术
            （如用于身份证识别，优先级取决于业务需求）
            语音识别技术
            （如用于语音搜索，可作为迭代功能）
            AI 对话
            （如用于智能客服，需在基础功能稳定后添加）
            第六梯队：特殊场景与第三方集成
            地图和定位服务技术
            （如用于同城服务，优先级取决于业务模式）
            音频处理技术、视频处理技术
            （如用于直播或视频内容，按需添加）
            第七梯队：高难度 / 非必需功能
            监控摄像头技术
            （技术复杂度高，需评估业务价值后谨慎添加）
            优化项目
            （持续贯穿整个开发周期，非独立阶段）
            排序逻辑：
            先底层后上层：部署、状态管理、权限等基础设施优先。
            先核心后扩展：聊天、支付、上传等核心功能优先于 AI、语音等增强功能。
            先易后难：基础验证、图片处理等技术难度低的优先于摄像头、OCR 等高复杂度功能。
            先安全后体验：认证、权限等安全功能优先于 UI 优化、响应式适配等体验功能。
            注：“优化项目” 作为持续改进工作，应贯穿整个开发流程，而非单独阶段。 
            */}
            {/* <VirtualList
                data={data}
                itemHeight={50}
                height={400}
                renderItem={(item, index) => (
                    <div key={index} style={{ height: 50, borderBottom: "1px solid #eee" }}>
                        {item}
                    </div>
                )}
            /> */}
        </AnimatedTransition>
    )
}

export default Merchandise;